<template>
	<view class="container">
		<view class="title">请上传你的头像</view>
		<view class="payatton">真实照片会大大提高交友机会哦！</view>
		<view class="up-img">
			<view class="no-img" @click="choiceImg">
				<image :src="headUrl ? headUrl : '/static/image/uploadImg.png'" mode=""></image>
				<view v-show="!headUrl" class="" style="margin-top: 20rpx;">
					上传头像
				</view>
			</view>
		</view>
		<view class="btns" @click="submit">
			下一步
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headUrl:'',//头像
				infoData:{},
			}
		},
		onLoad(options) {
			this.infoData = JSON.parse(options.infoData)
		},
		methods: {
			// 选择图片操作
			choiceImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择
					success: ress => {
						this.uploadUserImg(ress.tempFilePaths[0]);
					}
				});
			},
			uploadUserImg(blob) {
				let that = this;
				uni.showLoading({
					title: '上传中...'
				});
				uni.uploadFile({
					url: this.$http.baseUrl + '64803624da6de',
					filePath: blob,
					name: 'file',
					// header: {
					// 	Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
					// },
					success: res => {
						uni.hideLoading();
						that.headUrl = JSON.parse(res.data).data.url;
						console.log(that.headUrl,'that.headUrl')
						uni.showToast({
							icon:'none',
							title: '更新用户头像成功',
							duration: 1000
						});
					},
					fail: err => {
						uni.hideLoading();
						uni.showToast({
							title: '用户头像上传失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			// 提交
			submit() {
				if(!this.headUrl) return this.$helper.toast('none', '请上传头像')
				this.infoData.images = this.headUrl;
				this.$helper.to('/pages/views/interestPage/interestPage?infoData='+JSON.stringify(this.infoData))
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.container {
		padding: 25rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;

		.title {
			font-weight: 500;
			font-size: 48rpx;
			color: #000000;
			line-height: 67rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.payatton {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 39rpx;
			text-align: left;
			margin-top: 20rpx;
		}

		.up-img {
			width: 400rpx;
			height: 400rpx;
			background: #F8F8F8;
			border-radius: 50%;
			margin: 0 auto;
			margin-top: 80rpx;

			.no-img {
				width: 100%;
				height: 100%;
				margin: 0 auto;
				color: #333333;
				text-align: center;
				
				image {
					width: 100%;
					height:100%;
					border-radius: 50%;
				}
			}
		}
	}

	.btns {
		width: 630rpx;
		height: 90rpx;
		background: rgba(51, 51, 51, 0.8);
		border-radius: 49rpx;
		text-align: center;
		line-height: 90rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #FEC92F;
		position: fixed;
		bottom: 100rpx;
		left: 50%;
		transform: translate(-50%);
	}
</style>